<template>
	<view class="comment-list-app">
		<view class="empty" v-if="listData.items.length==0">暂无评论</view>
		<view class="items">
			<view class="item" v-for="(item,key) in listData.items" :key="key">
				<view class="top">
					<image class="avatar" src="../../../static/user-default2.png" style="width:80upx;height:80upx;background-color: #eee;"></image>
					<view class="right">
						<view class="username">{{item.userName}}</view>
						<view class="date">{{item.evaluateTime}}</view>
					</view>
				</view>
				<view class="rate-item"  style="margin-top:15upx;margin-bottom:15upx;">
					<!--
					<text>评分</text>
					-->
					<uni-rate max="5" value="5" size="20"></uni-rate>
				</view>
				<view class="content">{{item.evaluateComment}}</view>
				<view class="imgs">
					<view class="img"></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import util from '@/libs/util.js'
	import uniRate from '@/components/uni-rate/uni-rate.vue'

	export default {
		data() {
			return {
				formSearch: {
					teaHouseId:''
				},
				listData: {
					loading: false,
					count: 0,
					items: [
					]
				},
				item:this.getInitItem()
			};
		},
		onLoad(params) {	
			this.teaHouseId = params.teaHouseId;
		},
		onShow() {
			this.getListData();
		},
		components: {
			uniRate
		},
		methods: {
			...util,
			getInitItem() {
				return {
					id: '',
					score: 5,
					content: '谢谢您的帮助'
				};
			},
			onRateChange(obj) {
				this.item.score = obj.value
			},
			setTeaHouseId(teaHouseId) {
				this.formSearch.teaHouseId = teaHouseId;
			},
			getListData() {
				this.$api.post('/orderComment/queryPage',{
					teaHouseId: this.teaHouseId,
					rowCount: 10,
					pageNO: 1
				}).then((response) => {
					if (response.ret === 1){
						this.listData.items = response.data
						this.listData.loading = false
					} else {
						this.listData.items = [];
					}
				})
			},
			goPage(url) {
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		height: 100%;
	}
	.comment-list-app {
		background-color: #F5F4F8;
		height: 100%;
		font-size: 32upx;
		.empty{
			text-align: center;
			padding: 15upx;
		}
		.items{
			background-color: white;
			margin: 20upx;
			.item{
				margin: 20upx;
				border-bottom: 1upx solid #eee;
				padding-bottom: 20upx;
				.rate-item{
					display: flex;
				}
				.top{
					display: flex;
					.avatar{
						
					}
					.right{
						margin-left: 20upx;
						.username{
							
						}
						.date{
							font-size: 28upx;
							color: #909aaa;
						}
					}
				}
				.rate{
					
				}
				.content{
					
				}
				.imgs{
					.img{
						
					}
				}
			}
		}
	}
</style>
